<template>
    <section class="intelligent-content-bg overflowYAll">
        <div class="intelligent-content-box">
            <el-form :inline="true" :model="form2" class="demo-form-inline" >
                <!-- <el-form-item >
                    <el-button 
                        style="margin-left: unset;" 
                        @click="clickDaochu" 
                        class="diy_marage" 
                        type="primary" 
                        icon="el-icon-upload2">
                            导出
                    </el-button>
                </el-form-item> -->
                <el-form-item >
                    <el-date-picker
                        value-format="yyyy-MM-dd"
                        class="diy_marage" 
                        v-model="form2.time"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-input  v-model="form2.resourceServiceName" placeholder="请输入内容">
                        <el-button icon="el-icon-search" slot="append" @click="search"></el-button>
                    </el-input>
                </el-form-item>
            </el-form>
            <el-table
                :data="tableData"
                style="width: 100%"
                stripe 
                :header-cell-style="{background:'#cae4fe',color: '#000'}"
                :cell-style="{border:'none'}"
            >
                <el-table-column
                    fixed
                    type="selection"
                    width="55"
                >
                </el-table-column>
                <el-table-column
                    fixed
                    prop="resourceServiceName"
                    label="服务名称"
                    width="150"
                >
                </el-table-column>

            	<el-table-column
                    align="center"
                    v-for="(val,key) in tableLabel"
                    :prop="key"
                    :label="val"
                    width="150"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="100"
                >
                    <template slot-scope="scope">
                        <p @click="checkBao(scope)" class="clickStyle">
                        	查看报文
                        </p>
                        <p @click="checkError(scope)" class="clickStyle">
                        	失败条件
                        </p>
                    </template>
                </el-table-column>
            </el-table>
      
            <p style="margin-top: 15px;">
                <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    layout="prev, pager, next"
                    :total="total"
                >
                </el-pagination>
            </p>
            <el-dialog
                title=""
                :visible.sync="dialogVisibleDaochu"
                :modal = false
                width="30%"
                class=""
            >
                <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item label="导出方式">
                        <el-select v-model="form.region" placeholder="请选择">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="导出文件类型">
                        <el-select v-model="form.region1" placeholder="请选择">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary">确定</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
            <el-dialog
                title="查看报文"
                :visible.sync="dialogVisibleBao"
                width="50%"
                class="diy-dialog"
                :append-to-body="true"
            >
                <check-bao></check-bao>
            </el-dialog>
        </div>
    </section>
</template>

<script>
	import {
		computedResourceSearch,
		computedDaochu
	} from "./css_js_img/computedareaResource"
    import checkBao from "./components/checkBao"
    export default {
    	components:{
    		checkBao
    	},
        data() {
          return {
          			form2:{
          				resourceServiceName:'',
          				// time:'',
          				// pageNum:1,
          				// pageSize:10,
          				serviceType:1,
          				startTime:'',
          				endTime:'',
          			},
          			form:{
          				region:'',
          				region1:'',
          			},
          			total:30,
          			dialogVisibleDaochu:false,
          			dialogVisibleBao:false,
          			input21:'',
          			value7:'',
          			tableLabel:{
          				id:'记录标识',
          				segmentName:'所属网段',
          				areaName:'所属区域',
          				producerName:'服务方名称',
          				requesterIp:'请求ip地址',
          				startTime:'请求时间',
          				fuwuTime:'服务时长',
          				requestCondition:'请求条件',
          				responseStatus:'请求结果',
          				channelName:'使用的通道',
          				useFlowSize:'使用流量',
          			},
          			   tableData: []
          };
        },
        methods: {
        	checkBao(scope){
        		console.log(scope);
        		this.dialogVisibleBao =true;
        	},
        	checkError(scope){
                console.log(scope);
                alert(scope.row.responseMsg)
        	},
        	clickDaochu(){
     		     // this.dialogVisibleDaochu = true;
 				this.form2.startTime= this.form2[0];
        		 this.form2.endTime= this.form2[1];
				computedDaochu(this,this.form2)
        	},
        	search(){
        		 this.form2.startTime= this.form2[0];
        		 this.form2.endTime= this.form2[1];
        		 computedResourceSearch(this,this.form2);
        	},
        	handleCurrentChange(val){
        		this.form2.pageNum = val;
        		this.search();
        	}
        },
        mounted(){
        	this.search();	
        }
  };
</script>

<style scoped="scoped">
    /*section.share_server_ri{
	    background: #fff;
		padding: 15px;
    }*/
    /*.diy_marage{
    	margin: 0 5px 15px 5px;
    }*/
    .clickStyle{
        cursor: pointer;
        color: blue;
    }
    @keyframes dialog-fade-in {
    0% {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
    }
    100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    }
    }
    @keyframes dialog-fade-out {
    0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    }
    100% {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
    }
    }
</style>